import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 800
    height: 600
    visible: true
    title: qsTr("Canvas画布示例")

    Column{
        anchors.centerIn: parent
        anchors.margins: 10
        spacing: 10

        // 控制按钮
        Row{
            spacing: 10
            
            Button{
                text: "清除画布"
                onClicked: {
                    canvas.clear()
                }
            }

            Button{
                text: "绘制图形"
                onClicked: {
                    canvas.requestPaint()
                }
            }

            Button{
                text: "开始动画"
                onClicked: {
                    animationTimer.start()
                }
            }

            Button{
                text: "停止动画"
                onClicked: {
                    animationTimer.stop()
                }
            }

        }

        // 主画布
        Canvas{
            id: canvas
            width: parent.width
            height: 400
            antialiasing: true

            property real angle: 0
            property real scale: 1.0
            property bool scaleDirection: true

            // 添加clear函数
            function clear() {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)
                freeDrawingPoints = []
                angle = 0
                scale = 1.0
            }


            // 绘制函数
            onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)

                ctx.save()

                ctx.translate(width / 2, height / 2)
                ctx.rotate(angle*Math.PI/180)
                ctx.scale(scale, scale)

                // 绘制太阳
                ctx.fillStyle ="#FFD700"
                ctx.beginPath()
                ctx.arc(0, 0, 40, 0, 2*Math.PI)
                ctx.fill()

                // 绘制光线
                ctx.strokeStyle = "#FFA500"
                ctx.lineWidth = 3

                for(var i = 0; i < 8; i++){
                    ctx.beginPath()
                    ctx.moveTo(60,0)
                    ctx.lineTo(100,0)
                    ctx.stroke()
                    ctx.rotate(Math.PI/4)
                }

                // 绘制行星轨道
                ctx.strokeStyle = "#87CEEB"
                ctx.lineWidth = 2
                ctx.beginPath()
                ctx.arc(0, 0, 120, 0, 2*Math.PI)
                ctx.stroke()

                // 绘制行星
                ctx.fillStyle = "#87CEEB"
                ctx.beginPath()
                ctx.arc(120, 0, 20, 0, 2*Math.PI)
                ctx.fill()

                ctx.restore()

                // 绘制自由图形
                if (freeDrawing){
                    ctx.strokeStyle = "#FF0000"
                    ctx.lineWidth = 2
                    ctx.beginPath()
                    for(var i=0; i<freeDrawingPoints.length; i++){
                        if(i==0){
                            ctx.moveTo(freeDrawingPoints[i].x, freeDrawingPoints[i].y)
                        }else{
                            ctx.lineTo(freeDrawingPoints[i].x, freeDrawingPoints[i].y)
                        }
                    }
                }

                ctx.stroke()

            }
            property bool freeDrawing: false
            property var freeDrawingPoints: []

            MouseArea{
                anchors.fill: parent
                onPressed:{
                    canvas.freeDrawing = true
                    canvas.freeDrawingPoints = [{x: mouse.x, y: mouse.y}]
                    canvas.requestPaint()

                }

                onPositionChanged:{
                    if(canvas.freeDrawing){
                        canvas.freeDrawingPoints.push({x: mouse.x, y: mouse.y})
                        canvas.requestPaint()
                    }
                }

                onReleased:{
                    canvas.freeDrawing = false
                }
                function clear() {
                    var ctx = canvas.getContext("2d")
                    ctx.clearRect(0, 0, canvas.width, canvas.height)
                    freeDrawingPoints = []
                    angle = 0
                    scale = 1.0
                    
                }
         }

        }


        Text{
            text: "角度：" + canvas.angle.toFixed(1) + "° | 缩放：" + canvas.scale.toFixed(2) + "| 在画布上拖动鼠标可自由绘图"
            color: "gray"
        } 
    }

    Timer{
        id: animationTimer
        interval: 50
        repeat: true
        onTriggered:{
            canvas.angle = (canvas.angle + 2) % 360

            if (canvas.scaleDirection){
                canvas.scale += 0.02
                if (canvas.scale >= 1.5){
                    canvas.scaleDirection = false
                }else{
                    canvas.scale -= 0.02
                    if (canvas.scale <= 0.8){
                        canvas.scaleDirection = true
                    }
                }
            }

            canvas.requestPaint()
        }
    }



}

